<template>
    <div class="BigScreen">
		<nx-full-screen class="allfull screenfull" style="float: right;position: relative;z-index: 1111;"></nx-full-screen>
        
        <div class="header">
            <p class="title">智慧运营中央云平台</p>
            <div class="header_left">
                <div class="TimeForm">
                    <p class="time">{{nowDate}} {{nowWeek}} {{nowTime}} </p>
                </div>
            </div>
        </div>

        <div class="main_body">
            <div class="map_chart" ref="echartMap"></div>

            <div class="footer">
                <div class="module-item1">
                    <div class="titles">全局数据</div>
                    <div class="module_body">
                        <div class="item">
                            <span class="txt">今日运行：</span>
                            <span class="num">2322</span>
                            <span class="dw">台</span>
                        </div>
                        <div class="item">
                            <span class="txt">今日停机：</span>
                            <span class="num">243</span>
                            <span class="dw">台</span>
                        </div>
                        <div class="item">
                            <span class="txt">今日故障：</span>
                            <span class="num">24</span>
                            <span class="dw">台</span>
                        </div>
                        <div class="item">
                            <span class="txt">今日报修：</span>
                            <span class="num">234</span>
                            <span class="dw">台</span>
                        </div>
                    </div>
                </div>
                <div class="module-item1">
                    <div class="titles">今日动态</div>
                    <div class="module_body">
                        <div class="item">
                            <span class="txt">全国：</span>
                            <span class="num">2322</span>
                            <span class="dw">台</span>
                        </div>
                        <div class="item">
                            <span class="txt">停机：</span>
                            <span class="num">243</span>
                            <span class="dw">台</span>
                        </div>
                        <div class="item">
                            <span class="txt">故障：</span>
                            <span class="num">24</span>
                            <span class="dw">台</span>
                        </div>
                        <div class="item">
                            <span class="txt">报修：</span>
                            <span class="num">234</span>
                            <span class="dw">台</span>
                        </div>
                    </div>
                </div>

                <div class="module-item2">
                    <div class="titles">报修动态</div>
                    <div class="module_body">
                        <div class="item">
                            <span class="nav1">2021-04-14 13:01</span>
                            <span class="nav2">同煤集团</span>
                            <span class="nav3">拆装缸机</span>
                            <span class="nav4">徐伟</span>
                            <span class="nav5 wait">待处理</span>
                        </div>
                        <div class="item">
                            <span class="nav1">2021-04-14 13:01</span>
                            <span class="nav2">同煤集团</span>
                            <span class="nav3">顶杆机</span>
                            <span class="nav4">徐伟</span>
                            <span class="nav5 on">处理中</span>
                        </div>
                        <div class="item">
                            <span class="nav1">2021-04-14 13:01</span>
                            <span class="nav2">同煤集团</span>
                            <span class="nav3">拆装缸机</span>
                            <span class="nav4">徐伟</span>
                            <span class="nav5 on">处理中</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import mapOption from './map'
import nxFullScreen from '@/components/nx-full-screen/index'
export default {
    components: {
        nxFullScreen
    },
    data() {
        return {
            nowTime: '',
            nowDate: '',
            nowWeek: '',
        }
    },
    methods: {
        getdateFormat() { //显示时间
            var _this = this;
            let wk = new Date().getDay()
            let yy = String(new Date().getFullYear())
            let mm = new Date().getMonth() + 1
            let dd = String(new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate())
            let hou = String(new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours())
            let min = String(new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes())
            let sec = String(new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds())
            let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            let week = weeks[wk]

            _this.nowTime = hou + ':' + min + ':' + sec;
            _this.nowDate = yy + '/' + mm + '/' + dd
            _this.nowWeek = week
        },
        getEchartData() {
            let self = this;
            let echart = self.$echarts.init(self.$refs.echartMap);
			    echart.setOption(mapOption.option)
        }
    },
    mounted() {
        setInterval(() => {
            this.getdateFormat()
        }, 1000);
        this.getEchartData()
    }
}
</script>

<style lang="scss" scoped>
@import './index.scss'
</style>